<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="100px">
        <div class="logo-box">
          <img src="../assets/mms.png" alt="mms" style="width: 80px" />
        </div>

        <div v-for="(item, index) in routerData" :key="index">
          <router-link :to="{ path: item.path }" @click="navClick(index)">
            <div class="first-img-box">
              <img
                :src="item.gray"
                alt="mms"
                style="width: 40px"
                :class="
                  activeNavFooter == index ? 'displayNone' : 'displayShow'
                "
                class="everv-logopic"
              />
              <img
                :src="item.active"
                alt="mms"
                style="width: 40px"
                :class="
                  activeNavFooter == index ? 'displayShow' : 'displayNone'
                "
                class="everv-logopic"
              />
            </div>

            <div
              :class="activeNavFooter == index ? 'greenColor' : 'blackColor'"
            >
              {{ item.name }}
            </div>
          </router-link>
        </div>

        <div class="introduce" @click="gotoPrivacy()">
          <svg
            t="1655949527370"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3048"
            width="48"
            height="48"
          >
            <path
              d="M700.29755 254.162654l0 54.087872 0 460.690404c0 51.779294-41.983183 93.758384-93.7635 93.758384L253.143441 862.699314c-51.779294 0-93.762477-41.97909-93.762477-93.758384L159.380964 253.264191c0-51.78441 41.983183-93.76964 93.762477-93.76964l353.390609 0c51.780317 0 93.7635 41.984207 93.7635 93.76964L700.29755 254.162654 700.29755 254.162654 700.29755 254.162654zM700.29755 902.31559l0 14.475689 108.181885 0c59.743686 0 108.185978-48.436152 108.185978-108.180861L916.665413 375.863437c0-59.743686-48.442292-108.180861-108.185978-108.180861l-54.094012 0 0-54.087872c0-59.754942-48.437176-108.188025-108.181885-108.188025L213.468836 105.406678c-59.745732 0-108.181885 48.433082-108.181885 108.188025l0 595.016739c0 59.743686 48.436152 108.180861 108.181885 108.180861l432.734702 0C665.913439 916.79128 684.383092 911.512043 700.29755 902.31559L700.29755 902.31559 700.29755 902.31559zM862.572424 768.94093c0 51.779294-41.978067 93.758384-93.762477 93.758384l-28.89612 0c9.208732-15.919575 14.477736-34.385135 14.477736-54.087872L754.391563 321.774541l14.418384 0c51.78441 0 93.762477 41.973974 93.762477 93.758384l0 0.898463L862.572424 768.94093 862.572424 768.94093 862.572424 768.94093zM267.561825 686.899402c0 14.935154 12.108782 13.518898 27.043936 13.518898l270.461875 0c14.94027 0 27.043936 1.411139 27.043936-13.518898 0-14.94027-12.103666-40.574091-27.043936-40.574091L294.605761 646.325311C279.670607 646.325311 267.561825 671.959132 267.561825 686.899402L267.561825 686.899402 267.561825 686.899402zM267.561825 524.619412c0 14.935154 12.108782 13.524015 27.043936 13.524015l270.461875 0c14.94027 0 27.043936 1.411139 27.043936-13.524015 0-14.935154-12.103666-40.569998-27.043936-40.569998L294.605761 484.049414C279.670607 484.049414 267.561825 509.684258 267.561825 524.619412L267.561825 524.619412 267.561825 524.619412zM267.561825 362.344538c0 14.933107 12.108782 13.524015 27.043936 13.524015l270.461875 0c14.94027 0 27.043936 1.409093 27.043936-13.524015 0-14.935154-12.103666-40.569998-27.043936-40.569998L294.605761 321.774541C279.670607 321.774541 267.561825 347.409384 267.561825 362.344538L267.561825 362.344538 267.561825 362.344538zM267.561825 362.344538"
              p-id="3049"
              fill="#8a8a8a"
            ></path>
          </svg>
          <div>Privacy</div>
        </div>
        <div class="loginOut" @click="loginOutHandle()">
          <svg
            t="1655948677240"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2153"
            width="48"
            height="48"
          >
            <path
              d="M874.666667 855.744a19.093333 19.093333 0 0 1-19.136 18.922667H168.469333A19.2 19.2 0 0 1 149.333333 855.530667V168.469333A19.2 19.2 0 0 1 168.469333 149.333333h687.061334c10.581333 0 19.136 8.533333 19.136 18.922667V320h42.666666V168.256A61.717333 61.717333 0 0 0 855.530667 106.666667H168.469333A61.866667 61.866667 0 0 0 106.666667 168.469333v687.061334A61.866667 61.866667 0 0 0 168.469333 917.333333h687.061334A61.76 61.76 0 0 0 917.333333 855.744V704h-42.666666v151.744zM851.84 533.333333l-131.797333 131.754667a21.141333 21.141333 0 0 0 0.213333 29.973333 21.141333 21.141333 0 0 0 29.973333 0.192l165.589334-165.589333a20.821333 20.821333 0 0 0 6.122666-14.976 21.44 21.44 0 0 0-6.314666-14.997333l-168.533334-168.533334a21.141333 21.141333 0 0 0-29.952-0.213333 21.141333 21.141333 0 0 0 0.213334 29.973333L847.296 490.666667H469.333333v42.666666h382.506667z"
              fill="#8a8a8a"
              p-id="2154"
            ></path>
          </svg>
        </div>
      </el-aside>

      <el-container>
        <el-header>
          <div>logged in as {{ roleKey }}</div>

          <div class="head-right">
            <div>Last Login: {{ lastLoginDate }}</div>

            <div>闹钟</div>
            <div>设置</div>
            <el-select v-model="Selectvalue" class="m-2" placeholder="Select">
              <el-option value="English" />
              <el-option value="Chinese" />
            </el-select>
            <el-dropdown>
              <span class="el-dropdown-link">
                {{ roleKey }}
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="loginOut()">注销</el-dropdown-item>
                  <!-- <el-dropdown-item>修改</el-dropdown-item> -->
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        <el-main>
          <router-view />
        </el-main>
        <!-- <el-footer>
          <div>goparkin@2020</div>
          <div class="footer-right">
            <span @click="gotopageAbout()"> About </span>
            <span @click="gotopagePrivacy()"> Privacy </span>
            <span @click="gotopageTC()"> T&C </span>
          </div>
        </el-footer> -->
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { reactive, toRefs, getCurrentInstance, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ArrowDown } from "@element-plus/icons-vue";

export default {
  components: {
    ArrowDown,
  },
  setup() {
    // 获取全局挂载的参数,main.jsY原型挂载
    const { proxy } = getCurrentInstance();
    const rq = proxy.$instance;

    const state = reactive({
      count: 0,
      loginRole: "Sysadmin1", //登陆角色
      activeNavFooter: "", //激活的菜单栏
      loginTime: "", //登录时间
      Selectvalue: "", //选择的语言

      routerData: [
        {
          name: "Home",
          path: "/index/home",
          gray: require("../assets/home-gray.png"),
          active: require("../assets/home-fill.png"),
        },
        {
          name: "Task",
          path: "/index/access",
          gray: require("../assets/access-gray.png"),
          active: require("../assets/access.png"),
        },
        {
          name: "History",
          path: "/index/audit",
          gray: require("../assets/audit-gray.png"),
          active: require("../assets/audit.png"),
        },
        {
          name: "Profile",
          path: "/index/profile",
          gray: require("../assets/Profile-gray.png"),
          active: require("../assets/Profile.png"),
        },
      ],
      lastLoginDate: "", //上次登录时间
      roleKey: "", //登陆角色
    });

    let router = useRouter();

    function gotopageAbout() {
      router.push({
        //传递参数使用query的话，指定path或者name都行，但使用params的话，只能使用name指定
        path: "/index/about",
        // query: {
        //   num: 1,
        // },
      });
    }
    function gotopagePrivacy() {
      router.push({
        path: "/index/privacy",
      });
    }
    function gotopageTC() {
      router.push({
        path: "/index/tc",
      });
    }

    function loginOut() {
      localStorage.clear("token");
      router.push({
        path: "/",
      });
    }

    function navClick(index) {
      state.activeNavFooter = index;
    }

    function loginOutHandle() {
      rq.delete("/auth/logout").then((res) => {
        localStorage.removeItem("token");
        router.push({
          path: "/",
        });
      });
    }

    function gotoPrivacy() {
      router.push({
        path: "/index/privacy",
      });
    }

    onMounted(() => {
      let temp = localStorage
        .getItem("lastLoginDate")
        .split("T")[0]
        .split("-")
        .reverse();
      if (temp) {
        state.loginTime = temp;

        state.lastLoginDate = `${state.loginTime[0] - 0}/${
          state.loginTime[1] - 0
        }/${state.loginTime[2] - 0}`;
        state.roleKey = localStorage.getItem("roleKey");
      }
    });

    return {
      ArrowDown,
      ...toRefs(state),
      gotopageAbout,
      gotopagePrivacy,
      gotopageTC,
      loginOut,
      navClick,
      loginOutHandle,
      gotoPrivacy,
    };
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-sub-menu__title {
  border: 1px solid RED;
}

.displayShow {
  display: block;
}
.displayNone {
  display: none;
}
.greenColor {
  color: #3bcbbc;
}
.blackColor {
  color: #979797;
}

.common-layout {
  //侧边导航栏
  .el-aside {
    width: 100px;
    height: 100vh;

    a {
      text-decoration: none;
      display: inline-block !important;
      width: 100px;
      height: 80px;
      box-sizing: border-box;
      padding-top: 15px;

      text-align: center !important;
    }

    .first-img-box {
      display: flex;
      justify-content: center;
    }
    .logo-box {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .el-sub-menu .el-menu-item {
      height: 100px;

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .el-menu-item * {
      text-decoration: none;
    }

    .options-pic {
      height: 40px;
    }
    .introduce {
      text-align: center;
      color: #8a8a8a;
      margin-top: 16px;
    }
    .loginOut {
      position: absolute;
      bottom: 48px;
      width: 100px;
      text-align: center;
    }
  }

  .el-header {
    height: 70px;
    background: #fff;
    display: flex;
    box-sizing: border-box;
    padding: 0 60px;
    justify-content: space-between;
    align-items: center;
    .head-right {
      width: 50%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    //登陆的角色信息
    .el-dropdown-link {
      font-size: 20px;
    }
  }
  .el-main {
    background: #f2f3f8;
  }
  .el-footer {
    height: 60px;
    color: #fff;
    background: #00bdb5;
    box-sizing: border-box;
    padding: 0 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .footer-right {
      span {
        margin-left: 30px;
        cursor: pointer;
      }
    }
  }
}
</style>
